<template>
  <el-dialog title="待办" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
    <el-form :model="form">
      <el-form-item label="待办名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属项目" :label-width="formLabelWidth">
        <el-select v-model="form.belong" placeholder="请选择所属的项目" style="width:100%" >
          <el-option v-for="(item,index) in projects" :key="index" :value="item" :label="item"/>
        </el-select>
      </el-form-item>
	  <el-form-item label="待办内容" :label-width="formLabelWidth">
	    <el-input v-model="form.content" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="时间" :label-width="formLabelWidth">
	    <el-date-picker
	          v-model="time"
	          type="datetimerange"
	          range-separator="至"
	          start-placeholder="开始日期"
	          end-placeholder="结束日期"
			  value-format="yyyy-MM-dd HH:mm:ss">
	    </el-date-picker>
		<!-- v-model 可以是一个数组-->
	  </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
	import axios from "../../utils/axiosutils.js"
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
		belong:'',
		content:'',
		stime:'',
		etime:'',
      },
	  time:[],
      formLabelWidth: "80px",
	  projects:[]
    };
  },
  created() {
  	this.getProjects();
  },
  methods:{
	 getProjects(){
		axios.get(
			"/project/myProjects",
			resp=>{
				this.projects=resp.obj.names
			}
		)
	 },
	 save(){
		 this.form.stime=this.time[0];
		 this.form.etime=this.time[1];
		 axios.post(
			"/todo/save",
			resp=>{
				this.dialogFormVisible = false
				this.$emit('dayofthings');
			},
			this.form
		 )
	 }
  }
};
</script>